<template>
   <div class='home' style="width:100%; height: 94%;overflow: auto;">
        <H2 style="margin-bottom: 30px;">成绩查询</H2>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" >
            <el-form-item label="培训期查询">
                <el-select v-model="formInline" placeholder="培训期查询" style="width: 240px; height: 31px; overflow: hidden;">
                    <el-option
                        v-for="item in $store.state.Class_clopedia"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="单位查询">
                <el-select v-model="formInline.unit" placeholder="单位查询" style="width: 240px; height: 31px; overflow: hidden;">
                    <el-option
                        v-for="item in unitData"
                        :key="item.parent_id"
                        :label="item.office_name"
                        :value="item.office_name"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="名字查询">
                <el-input v-model="formInline.name" placeholder="名字查询" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="success" @click="Reset">重置查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="download">下载成绩文件</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" >
            <el-form-item label="考试状态">
                <el-select v-model="examination" placeholder="考试状态" style="width: 240px; margin-left:15px; height: 31px; overflow: hidden;">
                    <el-option
                        v-for="item in Examstatus"
                        :key="item.parent_id"
                        :label="item.office_name"
                        :value="item.parent_id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="试卷查询">
                <el-input v-model="Exampaper" style="width: 240px; height: 31px; overflow: hidden;" placeholder="请输入试卷名称" clearable />
            </el-form-item>
            <el-form-item label="分数段查询">
               <div style="display:flex;">
                    <el-input
                        v-model="score_min"
                        type="number"
                        style="width: 140px"
                        placeholder="最低分数"
                        clearable
                    />
                    <p style="margin:0px 10px;">至</p>
                    <el-input
                        v-model="score_max"
                        type="number"
                        style="width: 140px"
                        placeholder="最高分数"
                        clearable
                    />
               </div>
            </el-form-item>
        </el-form>
        <!-- <div style='display:flex; justify-content: space-between;'>
            <div style='display:flex; align-items: center;'>
            </div>
            <div style='display:flex; align-items: center;'>
                <p>试卷查询</p>
            </div>
            <div style='display:flex; align-items: center;'>
                <p>考试状态</p>Inuname
            </div>
        </div> -->
        <div>人数:&nbsp;&nbsp;&nbsp;{{pagesData}}</div>
        <div style="width:100%; margin-bottom: 20px;">
            <el-table
                :data="homeData"
                style="width: 100%; height:100%;"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="upolice_id" label="警号"  />
                <el-table-column prop="uname" label="姓名" />
                <el-table-column prop="cname" label="培训期" />
                <el-table-column prop="ename" label="试卷" />
                <el-table-column prop="office_name" label="单位" width="180" />
                <el-table-column prop="score" label="成绩" width="180" />
                <el-table-column prop="re_type" label="考试" />
                <el-table-column fixed="right" label="操作" >
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="Make_upexam(scope.row)">补考</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display:flex; justify-content: center;">
            <el-pagination
                background
                @current-change="homeGETpage"
                layout="prev, pager, next"
                :total="pagesData"
                class="mt-4"
            />
        </div>
        <el-drawer v-model="examtime" title="补考试时间" :with-header="false">
            <div  style="display: flex; justify-content: center; font-weight: 700; font-size: 18px;">
                <p> 试卷名称：</p>
                <p>{{ examinformation.ename }}</p>
            </div>
            <div style="display: flex; justify-content: center; ">
                <div>
                    <p style="margin: 20px 0px; font-weight: 700;"> 补考时间：</p>
                    <!-- <el-date-picker
                        v-model="examtimeData"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss"
                    /> -->
                    <el-date-picker
                        v-model="examtimeData"
                        type="datetimerange"
                        range-separator="止"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss"
                    /> 
                </div>
            </div>
            <div style="display: flex; justify-content: center; margin-top: 30px;">
                <el-button type="success" @click="confirm()">确认补考时间</el-button>
            </div>
        </el-drawer>
   </div>
</template>
<script>
export default {
    name: '',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    data () {
        return {
            formInline :{
                user: '',
                region: '',
                name: '',
                unit:'',
            },
            activities: [
                {
                    content: '入学',
                    timestamp: '2018-04-15',
                },
                {
                    content: '暂停',
                    timestamp: '2018-04-13',
                },
                {
                    content: '毕业',
                    timestamp: '2018-04-11',
                },
            ],
            homeData:[],
            pagesData:0,
            page:1,
            examtime: false,
            examinformation:'',
            examtimeData:[],
            unitData:[],
            Number_people:'',
            Examstatus:[
                {
                    office_name:'统考',
                    parent_id:'0'
                },{
                    office_name:'补考',
                    parent_id:'1'
                },{
                    office_name:'未考试',
                    parent_id:'2'
                }
            ],
            examination:'',
            Exampaper:'', // 试卷查询
            score_min:'',
            score_max:'',
        }
    },
    computed: {},
// 侦听器
    watch: {},
    created () {
        this.homeGETpage(1)
        this.get('office/').then(res=>{
            if(res.code == 200){
                this.unitData = res.data
            }else{
                this.$router.push('/Login')
            }
        })
        this.$store.dispatch('Classinformation')
        
    },
    mounted () {
    },
// 组件方法
    methods: {
        Reset() {
            this.formInline.name = ''
            this.formInline.user = ''
            this.formInline.unit = ''
            this.examination = ''
            this.Exampaper = ''
            this.score_min = ''
            this.score_max = ''
            let param ={
                office_name: this.formInline.unit,
                re_type:this.examination, // 考试状态
                uname: this.formInline.name,
                ename: this.Exampaper,  // 试卷查询
                cname: this.formInline.user,
                score_min: this.score_min,
                score_max: this.score_max
            }
            this.post('/statistics/studentList?pageNo=1',param).then(res=>{
                if(res.code == 200){
                    this.homeData = res.data.list
                    this.pagesData = res.data.total
                }else{
                    this.$router.push('/Login')
                }
            })
        },
        download() {
            window.open('http://'+window.location.host+'/api/statistics/export_score?cname='+this.formInline.user+'&score_max='+this.score_max+'&score_min='+this.score_min+'&ename='+this.Exampaper+'&re_type='+this.examination+'&uname='+this.formInline.name+'&office_name='+this.formInline.unit, '_blank');
        },
        confirm(){
            let param = {
                eid:this.examinformation.eid,
                uid:this.examinformation.uid,
                start_time: this.timestamp(this.examtimeData[0]),
                end_time:this.timestamp(this.examtimeData[1])
            }
            this.post('/exam/setReExam',param).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '补考提交',
                        type: 'success',
                    })
                    this.examtime = false
                }else{
                    this.$message({
                        message: '补考提交失败',
                        type: 'error',
                    })
                    this.examtime = false
                }
            })
        },
        Make_upexam(val){
            if(this.examtime){
                this.examtime = false
            }else{
                this.examtime = true
            }
            this.examinformation = val
        },
        onSubmit(){
            let param ={
                office_name: this.formInline.unit,
                re_type:this.examination, // 考试状态
                uname: this.formInline.name,
                ename: this.Exampaper,  // 试卷查询
                cname: this.formInline.user,
                score_min: this.score_min,
                score_max: this.score_max
            }
            this.post('/statistics/studentList?pageNo='+this.page+'&pageSize=10',param).then(res=>{
                if(res.code == 200){
                    this.homeData = res.data.list
                    this.pagesData = res.data.total
                }else{
                    this.$router.push('/Login')
                }
            })
        },
        homeGETpage(val){
            this.page = val
            let param ={
                office_name: this.formInline.unit,
                re_type:this.examination, // 考试状态
                uname: this.formInline.name,
                ename: this.Exampaper,  // 试卷查询
                cname: this.formInline.user,
                score_min: this.score_min,
                score_max: this.score_max
            }
            this.post('/statistics/studentList?pageNo='+val,param).then(res=>{
                if(res.code == 200){
                    this.homeData = res.data.list
                    this.pagesData = res.data.total
                }else{
                    this.$router.push('/Login')
                }
            })
        }
    },
// 创建前
    beforeCreate () { },
// 挂载前
    beforeMount () {},
// 更新前 
    beforeUpdate () {},
    updated () {},
// 组件创建最初始keep-alive标签中有效
    activated () { },
// 组件停用时
    deactivated () {},
// 销毁前
    beforeDestroy () {},
// 销毁后
    destroyed () {}
}
</script>
<style>
.el-select_wrapper{
    height: 28px;
    overflow: hidden;
}
</style>
<style scoped>
</style>